<!--
    页面：单元格操作
    路由：/importSheet
    作者：尹竹群
    部门：查账开发部
    时间：2021-09
    编辑：
-->
<template>
  <div class="container">
    <Row v-tc-height="'100%'">
      <!-- luckysheet表格区域 -->
      <i-col span="24" v-tc-height="'100%'">
        <div class="luckysheet" id="importSheet"></div>
      </i-col>
      <!-- 控制台 -->
    </Row>
  </div>
</template>

<script>
// 引入loadsh
import { cloneDeep } from "lodash";
// 解析文件插件
import LuckyExcel from "luckyexcel";

export default {
  name: "importSheet",
  data() {
    return {
      // 表格初始化数据
      sheetData: {
        // 设定DOM容器的id
        container: "importSheet",
        // 是否显示顶部信息栏
        showinfobar: false,
        // 设定表格语言
        lang: "zh",
        // 表格
        data: [
          //数据
          {
            name: "表一", //工作表名称
            color: "",
            index: 0, //唯一id
            status: 1,
            order: 0,
            row: 20, //行数
            column: 20, //列数
            celldata: [
              {
                r: 0,
                c: 0,
                v: {
                  m: 2,
                  op: 1,
                  tb: 1,
                  v: 2
                }
              },
              {
                r: 1,
                c: 0,
                v: {
                  m: 4,
                  op: 2,
                  tb: 2,
                  v: 4
                }
              },
              {
                r: 2,
                c: 0,
                v: {
                  ct: {
                    //单元格值格式
                    fa: "General", //格式名称为自动格式
                    t: "n" //格式类型为数字类型
                  },
                  //   v: 233, //内容的原始值为 233
                  //   m: 233, //内容的显示值为 233
                  bg: "#f6b26b", //背景为 "#f6b26b"
                  ff: 1, // 字体为 "Arial"
                  fc: "#990000", //字体颜色为 "#990000"
                  bl: 1, //字体加粗
                  it: 1, //字体斜体
                  fs: 9, //字体大小为 9px
                  //   cl: 1, //启用删除线
                  ht: 0, //水平居中
                  vt: 0, //垂直居中
                  //   tr: 2, //文字旋转 -45°
                  tb: 2, //文本自动换行
                  ps: {
                    //批注
                    left: 92, //批注框左边距
                    top: 10, //批注框上边距
                    width: 91, //批注框宽度
                    height: 48, //批注框高度
                    value: "查账开发部", //批准内容
                    isshow: true //批注框为显示状态
                  },
                  f: "=SUM(A1,A2)" //单元格是一个求和公式
                }
              }
            ],
            data: [],
            config: {},
            allowEdit: false
          },
          {
            name: "表二",
            color: "",
            index: 1,

            status: 0,
            order: 1,
            celldata: [],
            config: {}
          }
        ]
      },
      // 备份数据
      copySheetData: null,
      // 表格数据
      showSheetData: null
    };
  },
  methods: {
    /**
     * 初始化报表
     */
    initSheet() {
      window.luckysheet.create(this.showSheetData);
    },

    /**
     * 查找单元格
     */
    handleFindSheet() {
      const range = window.luckysheet.getRangeWithFlatten();
      luckysheet.setCellFormat(range[0].r, range[0].c, "ps", {
        left: 92, //批注框左边距
        top: 10, //批注框上边距
        width: 91, //批注框宽度
        height: 48, //批注框高度
        value: "I am a comment", //批准内容
        isshow: true //批注框为显示状态
      });
    }
  },
  mounted() {
    this.showSheetData = cloneDeep(this.sheetData);

    // 初始化报表
    this.initSheet();
  }
};
</script>

<style scoped>
.luckysheet {
  width: 100%;
  height: 100%;
}
</style>
